<template>
	<gui-page :customHeader="true" :customFooter="true" :footerSets="{height:280, zIndex:100}">
		<!-- 自定义头部导航 -->
		<view slot="gHeader">
			<view class="gui-flex gui-nowrap gui-rows gui-align-items-center gui-padding">
				<!-- 返回按钮 -->
				<gui-header-leading :onlyBack="true"></gui-header-leading>
				<!-- 导航文本此处也可以是其他自定义内容 -->
				<text class="gui-h4 gui-ellipsis gui-text-center gui-header-content gui-primary-color">订单中心</text>
			</view>
		</view>
		<view slot="gBody">
			<scroll-view scroll-y>
				<view class="height-50"></view>
				<view class="mx-3 gui-bg-white gui-tbr-large border-radius-15">
					<view class="py-2 px-3">
						<view>
							<text class="my-icon icon-dizhi gui-text gui-black9"></text>
							<text class="pl-2 gui-black9 gui-text">订单配送至</text>
						</view>
						<view class="gui-list-items">
							<view class="gui-list-body py-1">
								<view>
									<text class="gui-black6 gui-h6">谭先生</text>
									<text class="gui-black9 ml-2">18879487524</text>
								</view>
								<view style="line-height: 35rpx;"><text class="gui-black6 gui-h6">湖南省怀化市麻阳锦盒湖南省怀化市麻阳锦盒湖南省怀化市麻阳锦盒</text></view>
							</view>
							<text class="gui-list-arrow-right gui-icons icon-arrow-right"></text>
						</view>
						<view class="fx-f fx-f-jsb">
							<view>
								<text class="my-icon icon-dizhi gui-text gui-black9"></text>
								<text class="pl-2 gui-black9 gui-text">发货时间</text>
							</view>
							<view><text class="gui-text main-text-color">下午五点</text></view>
						</view>
					</view>
				</view>
				<view class="mx-3 mt-2 gui-bg-white gui-tbr-large border-radius-15">
					<view class="py-2 px-3">
						<view class="product-list-box fx-f gui-shadow">
							<view class="fx-f-box-30 fx-f-ajc">
								<image class="width-full" src="/static/images/shop-01.png" mode="widthFix"></image>
							</view>
							<view class="fx-f-box-70 fx-a-c fx-f width-full">
								<view class="fx-f fx-f-jsb width-full mx-3">
									<view class="width-full">
										<view class="product-list-title fx-f-jsb fx-f width-full"><text>麻阳冰糖橙10斤一箱</text><text class="main-color-red">￥47</text></view>
										<view class="gui-text-small gui-gray">规格：10斤/箱</view>
										<view class="gui-text-small gui-gray"><text>单价：47/份</text><text class="pl-2">数量：1份</text></view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="mx-3 mt-2 gui-bg-white gui-tbr-large border-radius-15">
					<view class="py-2 px-3">
						<view class="product-list-box fx-f gui-shadow">
							<view class="fx-f-box-30 fx-f-ajc">
								<image class="width-full" src="/static/images/shop-01.png" mode="widthFix"></image>
							</view>
							<view class="fx-f-box-70 fx-a-c fx-f width-full">
								<view class="fx-f fx-f-jsb width-full mx-3">
									<view class="width-full">
										<view class="product-list-title fx-f-jsb fx-f width-full"><text>麻阳冰糖橙10斤一箱</text><text class="main-color-red">￥47</text></view>
										<view class="gui-text-small gui-gray">规格：10斤/箱</view>
										<view class="gui-text-small gui-gray"><text>单价：47/份</text><text class="pl-2">数量：1份</text></view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="mx-3 mt-2 gui-bg-white gui-tbr-large border-radius-15">
					<view class="py-2 px-3">
						<view class="product-list-box fx-f gui-shadow">
							<view class="fx-f-box-30 fx-f-ajc">
								<image class="width-full" src="/static/images/shop-01.png" mode="widthFix"></image>
							</view>
							<view class="fx-f-box-70 fx-a-c fx-f width-full">
								<view class="fx-f fx-f-jsb width-full mx-3">
									<view class="width-full">
										<view class="product-list-title fx-f-jsb fx-f width-full"><text>麻阳冰糖橙10斤一箱</text><text class="main-color-red">￥47</text></view>
										<view class="gui-text-small gui-gray">规格：10斤/箱</view>
										<view class="gui-text-small gui-gray"><text>单价：47/份</text><text class="pl-2">数量：1份</text></view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="mx-3 mt-2 gui-bg-white gui-tbr-large border-radius-15">
					<view class="py-2 px-3">
						<view class="product-list-box fx-f gui-shadow">
							<view class="fx-f-box-30 fx-f-ajc">
								<image class="width-full" src="/static/images/shop-01.png" mode="widthFix"></image>
							</view>
							<view class="fx-f-box-70 fx-a-c fx-f width-full">
								<view class="fx-f fx-f-jsb width-full mx-3">
									<view class="width-full">
										<view class="product-list-title fx-f-jsb fx-f width-full"><text>麻阳冰糖橙10斤一箱</text><text class="main-color-red">￥47</text></view>
										<view class="gui-text-small gui-gray">规格：10斤/箱</view>
										<view class="gui-text-small gui-gray"><text>单价：47/份</text><text class="pl-2">数量：1份</text></view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="height-200"></view>
			</scroll-view>
		</view>
		<view class="my-footer gui-nowrap gui-bg-white" slot="gFooter">
			<view class="px-4">
				<view class="fx-f fx-f-jsb pt-3">
					<text class="gui-black9 gui-text gui-bold">商品种类</text>
					<text class="gui-black9 gui-text gui-bold">1</text>
				</view>
				<view class="fx-f fx-f-jsb mt-1">
					<text class="gui-black gui-h5 gui-bold">总价</text>
					<view class="main-color-red gui-h5 gui-bold"><text class="gui-yellow font-size-22">￥</text><text>47</text></view>
				</view>
				<view class="mt-3">
					<view class="pay-btn gui-text-center font-size-30 gui-color-white gui-box-shadow">支付</view>
				</view>
			</view>
		</view>
	</gui-page>
</template>

<script></script>

<style lang="scss" scoped>
	/*  底部自定义 */
	.my-footer {
		border-radius: 20rpx;
		height: 280rpx;
		.pay-btn {
			background-image: linear-gradient(to bottom, #FF6E75, #FF4949);
			height: 80rpx;
			border-radius: 40rpx;
			line-height: 80rpx;
		}
		
	}
	

</style>
